<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Markdown_editer</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/usual_class.css">
    <script src="js/markdown.min.js"></script>
    <!-- <script src="js/jquery-1.9.0.min.js"></script> -->
    <!-- <script src="js/FSO.js"></script> -->
    <style>
    /*.drop-box {
        position: relative;
        height: 144px;
    }*/
    /*.drop-box>span {
        display: block;
        width: 200px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        z-index: -1;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }*/
    
    #main-box>div {
        position: relative;
        display: inline-block;
        width: 50%;
        height: 800px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        resize: none;
    }
    
    #text-input {
        width: 100%;
        height: 726px;
        resize: none;
    }
    
    #text-input:focus {
        outline: rgba(46, 204, 113, 1) auto 5px;
    }
    
    #md_tool {}
    
    #icon_box>img {
        height: 32px;
        margin-right: 8px;
        border: solid 1px #fff;
    }
    
    #preview {
        overflow: auto;
        height: 100%;
    }
    
    .drop-box-t {
        color: rgba(52, 73, 94, 1);
    }
    
    #view>img {
        height: 144px;
    }
    </style>
</head>

<body>
    <!-- <div>
        <div class="va-t m16" id="tem_dBox">
            <div class="bor b-tran drop-box c-grey">
                <span>请将需要添加的图片拖动至此处</span>
                <div class="ondrop"></div>
            </div>
        </div>
        <div id="view" class="d-il va-t">
        </div>
    </div> -->
    <form class="inline_hack" id="main-box"> 
        <div class="va-t">
            <div class="flex-box">
                <input id="md_title" type="text" class="input-normal flex1" placeholder="请为文档命名标题" autofocus="autofocus" required oninvalid="setCustomValidity('标题不能为空喔')" oninput="setCustomValidity('')">
            </div>
            <div id="md_tool">
                <div class=" bg-tran ta-r">
                    <!-- -------------------------------------input_file--------------------------- -->
                    <div class="d-il" id="icon_box"></div>
                    <div class="fileup-container mr8">
                        <div class="fileup">
                            <label for="input_file_icon" class="fileup-in btn bg-cyan">为主题选择icon</label>
                            <input type="file" id="input_file_icon">
                        </div>
                    </div>
                    <button class="btn bg-grey mr8">查看上传过的图片</button>
                    <button class="btn bg-cyan mr8">保存</button>
                    <input type="submit" class="btn bg-green" value="发布">
                </div>
            </div>
            <textarea id="text-input" class="p8 b-tran drop-box flex1" oninput="this.editor.update()" placeholder="Start edit markdown......" required oninvalid="setCustomValidity('写点东西吧骚年')" oninput="setCustomValidity('')"></textarea>
        </div>
        <div class="va-t bor-l b-tran">
            <div id="preview" class="p8 bor-b b-tran bg-yellow-t"></div>
        </div>
    </form>
    <div class="plr16 pb16">
        <h4>Tips</h4>
        <ul>
            <li>![Alt text](/path/to/img.jpg "Optional title")</li>
            <li>[some_link](link)</li>
        </ul>
    </div>
</body>
<script>
console.log(document.getElementsByClassName('btn'))
    /**
     * markdowm 插件
     * @param {[type]} input   [description]
     * @param {[type]} preview [description]
     */
function Editor(input, preview) {
    this.update = function() {
        preview.innerHTML = markdown.toHTML(input.value);
    };
    input.editor = this;
    this.update();
}
var $$ = function(id) {
    return document.getElementById(id);
};
new Editor($$("text-input"), $$("preview"));

/**
 * input title的转换
 * @return {[type]} [description]
 */
(function() {
    var md_title = document.getElementById('md_title');
    var text_input = document.getElementById('text-input');
    /**
     * len 放外边系为了保证每次获取葛都系击键之前葛长度
     * @type {Number}
     */
    var len = 0;
    md_title.addEventListener('input', function() {
        /**
         * 将md_title葛字符串裁剪出去
         * @type {[type]}
         */
        var text_input_str = text_input.value.slice(len);
        // console.log(text_input_str)
        /**
         * md_title葛实时长度加上裁剪后葛字符串
         * @type {[type]}
         */
        text_input.value = this.value + text_input_str;
        /**
         * 更新len
         * @type {[type]}
         */
        len = md_title.value.length;
    }, false);
})();

/**
 * icon upload
 * @return {[type]} [description]
 */
(function() {
    var up_file = document.getElementById('input_file_icon');
    up_file.onchange = function() {
        /**
         * 前置检测
         * @param  {[type]} this.files[0].type.indexOf('image') [description]
         * @return {[type]}                                     [description]
         */
        if (this.files[0].type.indexOf('image') === -1) {
            alert("您拖的不是图片！");
            return false;
        }
        var filesize = Math.floor((this.files[0].size) / 1024);
        if (filesize > 500) {
            alert("上传大小不能超过500K.");
            return false;
        }
        /**
         * 创建url
         * @type {[type]}
         */
        var icon_url = getImgUrl(this.files[0]);
        var str = document.createElement('img');
        str.src = icon_url;
        /**
         * 置入box
         * @type {[type]}
         */
        var icon_box = document.getElementById('icon_box');
        if (!icon_box.hasChildNodes()) {
            icon_box.appendChild(str);
        } else {
            icon_box.replaceChild(str, icon_box.firstChild);
        }
    }
})();

/**
 * 取消document dnd事件
 * @param  {[type]} tBox [description]
 * @return {[type]}      [description]
 */
(function() {
    retarBoxBind(document);

    function retarBoxBind(tBox) {
        tBox.ondragover = function(ev) {
            ev.preventDefault();
        }
        tBox.ondragenter = function(ev) {
            ev.preventDefault();
        }

        tBox.ondrop = function(ev) {
            ev.preventDefault();
        }
        tBox.ondragleave = function(ev) {
            ev.preventDefault();
        }
    }
})();

/**
 * md 图片拖拽
 * @return {[type]} [description]
 */
(function() {
    // var tBox = document.getElementById('tem_dBox').querySelector('.drop-box');
    var tBox = document.querySelector('.drop-box');
    var urlImgs = Array();
    tarBoxBind(tBox);

    /**
     * 目标box
     * @param  {[type]} ev [description]
     * @return {[type]}    [description]
     */
    function tarBoxBind(tBox) {
        tBox.ondragover = function(ev) {
            console.log('over');
            ev.preventDefault();
        }
        tBox.ondragenter = function(ev) {
            console.log('enter');
            // var dBox_change = document.getElementById('tem_dBox').querySelector('span');
            // dBox_change.className = 'drop-box-t';
        }

        tBox.ondrop = function(ev) {
            // var dBox_change = document.getElementById('tem_dBox').querySelector('span');
            // dBox_change.className = '';
            var urlImg = "";
            var titleImg = "";
            var str = "";
            console.log('onDrop');
            ev.preventDefault();
            /**
             * 获取文件
             * @type {[type]}
             */
            var filelist = ev.dataTransfer.files;
            console.log(filelist[0])
            if (filelist[0].type.indexOf('image') === -1) {
                alert("您拖的不是图片！");
                return false;
            }
            var filesize = Math.floor((filelist[0].size) / 1024);
            if (filesize > 500) {
                alert("上传大小不能超过500K.");
                return false;
            }
            /**
             * 生成url
             * @type {[type]}
             */
            urlImg = getImgUrl(filelist[0]);

            var md_addImg = "![Alt text](" + urlImg + " 'Optional title')";

            var md_cent = document.getElementById('text-input').value;
            if (md_cent == undefined) {
                md_cent = "";
            }
            md_cent += md_addImg;
            document.getElementById('text-input').value = md_cent;
            // document.getElementById('text-input').fireEvent("onchange");
            console.log(md_cent)

            console.log(urlImg) = document.createElement('img');
            str.src = urlImg;
            // document.getElementById('view').appendChild(str);
            /**
             * 加入队列
             */
            urlImgs.push(urlImg);

        }
        tBox.ondragleave = function(ev) {
            var dBox_change = document.getElementById('tem_dBox').querySelector('span');
            dBox_change.className = '';
            console.log('dleave');
        }
    }
})();

/**
 * 获取图片url
 * @param  {[type]} file [description]
 * @return {[type]}      [description]
 */
function getImgUrl(file) {
    var url = null;
    if (window.createObjectURL != undefined) { // basic
        url = window.createObjectURL(file);
    } else if (window.URL != undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
    }
    return url;
}
</script>

</html>
